<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>智能办公系统 - 登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/css/theme-chalk.css}" />
    <link rel="stylesheet" th:href="@{/static/css/login.css}" />

    <link rel="shortcut icon" th:href="@{/static/icon/favicon.ico}" />
    <link rel="bookmark"  th:href="@{/static/icon/favicon.ico}"  />

</head>
<body>
    <!-- 星空背景 -->
    <div class="stars"></div>

    <!-- 科技线条 -->
    <div class="tech-lines">
        <div class="tech-line" style="top: 20%"></div>
        <div class="tech-line" style="top: 40%"></div>
        <div class="tech-line" style="top: 60%"></div>
        <div class="tech-line" style="top: 80%"></div>
    </div>

    <!-- 行星群 -->
    <div class="planets">
        <div class="planet planet-1"></div>
        <div class="planet planet-2"></div>
        <div class="planet planet-3"></div>
        <div class="planet planet-4"></div>
        <!-- ... 添加更多行星 -->
    </div>

    <!-- 流星群 -->
    <div class="shooting-stars"></div>

    <div id="app">
        <div class="login-container">
            <div class="login-header">
                <h2 class="login-title">
                    <i class="el-icon-office-building"></i>
                        <p>智能办公系统</p>
                </h2>
                <p class="login-subtitle">INTELLIGENT OFFICE SYSTEM</p>
            </div>
            <el-form  ref="loginForm">
                <el-form-item prop="code" label="错误编码">
                    <el-input  clearable
                        v-model="reason"
                        prefix-icon="el-icon-user"
                       >
                    </el-input>
                </el-form-item>
                <el-form-item prop="china" label="错误含义">
                    <el-input  clearable
                               v-model="china"
                               prefix-icon="el-icon-user"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>



    <!-- import Vue before Element -->
    <script th:src="@{/static/js/vue.js}"></script>

    <!-- import JavaScript -->
    <script th:src="@{/static/js/element-ui.js}"></script>
    <script th:src="@{/static/js/axios.js}"></script>
    <script th:src="@{/static/js/crypto.js}"></script>
    <script th:src="@{/static/js/kit/Kit.js}"></script>
    <script th:src="@{/static/js/const.js}"></script>



    <!-- 添加动态生成星星的脚本 -->
    <script>
        const stars = document.querySelector('.stars');
        document.addEventListener('DOMContentLoaded', async function () {
            // 生成20颗星星
            for (let i = 0; i < 20; i++) {
                kit.createStar(stars);
            }

            const planets = document.querySelector('.planets');
            // 动态创建20个行星
            for (let i = 0; i < 20; i++) {
                const planet = document.createElement('div');
                planet.className = 'planet';
                planets.appendChild(planet);
            }

            // 生成200条流星
            const shootingStars = document.querySelector('.shooting-stars');
            for (let i = 0; i < 20; i++) {
                kit.createShootingStar(shootingStars);
            }
        });

        // 添加星星闪烁动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes twinkle {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.3; }
            }
        `;
        document.head.appendChild(style);

        // 定期刷新流星位置
        setInterval(() => {kit.refreshStar();}, 5000);
    </script>

    <script th:inline="text" >
        new Vue({
            el: '#app',
            data() {
                return {
                    reason: '[[${reason}]]',
                    errMap: {
                        '10002': '用户认证失败'
                    },
                    china: '[[${reason}]]',
                }
            },
            methods: {


            },
            mounted() {
                    this.china = this.errMap[this.reason];
            }
        })
    </script>
</body>
</html> 